@import '~cropperjs/dist/cropper.css';

.ele-cropper {
  .ele-cropper-group {
    display: flex;
  }

  .ele-cropper-img-group {
    flex: 1;
  }

  .ele-cropper-preview-group {
    font-size: 0;
    text-align: right;
  }

  .ele-cropper-preview {
    display: inline-block;
    border: 1px solid hsla(0, 0%, 80%, 0.6);
    vertical-align: top;
    overflow: hidden;
  }

  .ele-cropper-preview-circle {
    margin-top: 20px;
    border-radius: 50%;
  }
}

/* 小屏幕适应 */
@media screen and (max-width: 768px) {
  .ele-cropper .ele-cropper-preview-group {
    display: none;
  }
}

/*-----------cropper-tools-------------*/
/* 操作按钮 */
.ele-cropper-tool {
  margin-top: 10px;

  .ele-cropper-tool-item {
    margin-top: 10px;
    margin-right: 18px;
    vertical-align: top;

    &:last-child {
      margin-right: 0 !important;
    }

    & > div {
      display: inline-block;
    }
  }

  .el-button {
    padding-left: 12px;
    padding-right: 12px;
  }

  .el-upload .el-button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .ele-cropper-icon-scale-x {
    transform: rotate(90deg);
  }
}

/* 小屏幕适应 */
@media screen and (max-width: 768px) {
  .ele-cropper-tool {
    .ele-cropper-tool-item {
      margin-right: 6px;
    }

    .el-button {
      padding-left: 10px;
      padding-right: 10px;
    }
  }
}
